<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="vid">
        <el-input v-model="searchMap.vid" placeholder="会员编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="vname">
        <el-input v-model="searchMap.vname" placeholder="加盟人"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="vphone">
        <el-input v-model="searchMap.vphone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="vaddress">
        <el-input v-model="searchMap.vaddress" placeholder="店地址"></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>会员编号：</span>
              <span>{{ props.row.vid }}</span>
            </el-form-item>
            <el-form-item>
              <span>加盟人：</span>
              <span>{{ props.row.vname }}</span>
            </el-form-item>
            <el-form-item>
              <span>联系电话：</span>
              <span>{{ props.row.vphone }}</span>
            </el-form-item>
            <el-form-item>
              <span>加盟费：</span>
              <span>{{ props.row.vmoney }}元</span>
            </el-form-item>
            <el-form-item>
              <span>支付类型：</span>
              <span>{{ props.row.vtype }}</span>
            </el-form-item>
            <el-form-item>
              <span>店地址：</span>
              <span>{{ props.row.vaddress }}</span>
            </el-form-item>
            <el-form-item>
              <span>加盟时间：</span>
              <span>{{ props.row.vtime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="46"> </el-table-column>
      <el-table-column prop="vid" label="会员编号"> </el-table-column>
      <el-table-column prop="vname" label="加盟人" width="80">
      </el-table-column>
      <el-table-column prop="vtype" label="支付类型" width="100">
      </el-table-column>
      <el-table-column prop="vaddress" label="店地址"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.vid)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.vid, scope.row.vname)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增会员" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="加盟人" style="height: 36px" prop="vname">
          <el-input v-model="pojo.vname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" style="height: 36px" prop="vphone">
          <el-input v-model="pojo.vphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店地址" style="height: 36px" prop="vaddress">
          <el-input v-model="pojo.vaddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="加盟费" style="height: 36px" prop="vmoney">
          <el-input v-model="pojo.vmoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" style="height: 10px" prop="vtype">
          <el-select v-model="pojo.vtype" placeholder="请选择支付方式">
            <el-option label="微信支付" value="微信支付"></el-option>
            <el-option label="支付宝支付" value="支付宝支付"></el-option>
            <el-option label="银行卡支付" value="银行卡支付"></el-option>
            <el-option label="现金支付" value="现金支付"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneVips('pojo')">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑会员信息" width="460px" :visible.sync="dialogFormVisible2">
      <el-form
        :rules="rules"
        ref="pojoEdit"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="加盟人" style="height: 36px" prop="vname">
          <el-input v-model="pojoEdit.vname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" style="height: 36px" prop="vphone">
          <el-input v-model="pojoEdit.vphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店地址" style="height: 36px" prop="vaddress">
          <el-input v-model="pojoEdit.vaddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveOneVips('pojoEdit')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import memberApi from "@/api/member";

export default {
  data() {
    return {
      list: [],
      searchMap: {
        vid: "",
        vname: "",
        vphone: "",
        vaddress: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pojo: {
        vname: "",
        vphone: "",
        vaddress: "",
        vmoney: "",
        vtype: "",
      },
      pojoEdit: {
        vid: "",
        vname: "",
        vphone: "",
        vaddress: ""
      },
      rules: {
        vname: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        vphone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        vaddress: [
          { required: true, message: "地址不能为空", trigger: "blur" },
        ],
        vtype: [
          { required: true, message: "支付类型不能为空", trigger: "change" },
        ],
        vmoney: [{ required: true, message: "金额不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      memberApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    handleEdit(vid) {
      memberApi.getOneVips(vid).then((response) => {
        this.pojoEdit.vid = response.data[0].vid;
        this.pojoEdit.vname = response.data[0].vname;
        this.pojoEdit.vaddress = response.data[0].vaddress;
        this.pojoEdit.vphone = response.data[0].vphone;
        
      })
      this.dialogFormVisible2 = true;
    },
    saveOneVips(fromName){
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          memberApi.editOneVips(this.pojoEdit).then((response) => {
            this.fetchData();
            this.dialogFormVisible2 = false;
          });
        } else {
        }
      });
    },
    handleDelete(vid, vname) {
      this.$confirm("此操作将永久删除" + vname + ", 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          memberApi.deleteOneVips(vid).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneVips(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          memberApi.addOneVips(this.pojo).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible = false;
          });
        } else {
        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
}
.items1 {
  width: 140px;
}
.items2 {
  width: 100px;
}
.items3 {
  width: 120px;
}
.items4 {
  width: 130px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>